<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案件处理过程</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
</head>

<style>
    .processEnclosure{
        margin-top: 10px;
    }
    .layui-timeline-item{
        padding-bottom: 40px;
    }
</style>

<body>
<div style="background-color:#3399ff;border-bottom:5px solid #ffcc00;height: 30px;line-height:30px;padding-left:10px;font-size: 16px;">
    <p style="color: #ffffff;">处理过程(共<span id="processCount">0</span>条)</p>

</div>

<div style="background-color:#fdfdfd;margin-top: 10px;padding-top: 20px;">
    <ul class="layui-timeline" id="timeline">
    </ul>
    <div style="height: 50px;"></div>
</div>

</body>

<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>

<script>
    function getProcessDataByCount(processId){
        $.ajax({
            url: mainUri+"/VCaseProcInfoByPolice/getCaseOperNote",
            data: {processId:processId},
            type: "Post",
            dataType: "json",
            success: function (data) {
                if(data.data.length<1){
                    getProcessDataByProcess(processId)
                }else{
                    setTimeLineStart(data.data)
                    $("#processCount").text(data.count)
                }
            },
            error: function () {
                console.log("数据加载失败")
            }
        });
    }
    function getProcessDataByProcess(processId){
        $.ajax({
            url: mainUri+"/vProcInfo/selectByProcessId",
            data: {processId:processId},
            type: "Post",
            dataType: "json",
            success: function (data) {
                setTimeLineStartByOne(data.data)
                $("#processCount").text(data.count)
            },
            error: function () {
                console.log("数据加载失败")
            }
        });
    }
    function setTimeLine(vProcInfodata){
        var top="<li class=\"layui-timeline-item\">\n" +
            "            <i class=\"layui-icon layui-bg-blue layui-timeline-axis\">&#xe63f;</i>\n" +
            "            <div class=\"layui-timeline-content layui-text\">";
        var topRed="<li class=\"layui-timeline-item\">\n" +
            "            <i class=\"layui-icon layui-bg-red layui-timeline-axis\">&#xe63f;</i>\n" +
            "            <div class=\"layui-timeline-content layui-text\">";
        var botton="</div>\n" +
            "        </li>\n" +
            "        <hr style='border: 1px dashed #4db0fd;height: 1px;margin: 0 15px 20px 10px'>";
        for(var i=0;i<vProcInfodata.length;i++){
            if(vProcInfodata[i].back&&vProcInfodata[i].resultStatusId==1&&i!=0){
                var ctentType="回退";
            }else{
                var ctentType=vProcInfodata[i].conStaticName;
            }

            var content=" <h3 class=\"layui-timeline-title\">" +
                "<span >状态:"+ctentType+"</span> |"+
                "<span style=\"margin-left: 15px\">"+vProcInfodata[i].departmentName+"</span>" +
                "<span style=\"margin-left: 10px\">"+vProcInfodata[i].proceDate+"</span>" +
                "<span style=\"margin-left: 10px\">"+vProcInfodata[i].fullName+"("+vProcInfodata[i].procDepartmentName+")"+"</span>" +

                "</h3>\n" +
                "                <p>" +
                vProcInfodata[i].procreMark+
                "                </p>"
            var contentIsRes="";
            if(vProcInfodata[i].resources){
                contentIsRes="<p>\n" +
                    "                    <a name=\"showContent\" href=\"javascript:;\" clickId=\""+vProcInfodata[i].opernoteId+"\"\n" +
                    "                     onclick='showFile(\""+vProcInfodata[i].opernoteId+"\")'  style=\"cursor:pointer\">附件</a>\n" +
                    "                </p>"
            }
            if(vProcInfodata[i].back&&vProcInfodata[i].resultStatusId==1&&i!=0){
                $("#timeline").append(topRed+content+contentIsRes+botton);
            }else{
                $("#timeline").append(top+content+contentIsRes+botton);
            }
        }
        returnData();
    }

    function setTimeLineStart(vProcInfodata){
        var top="<li class=\"layui-timeline-item\">\n" +
            "            <i class=\"layui-icon layui-bg-blue layui-timeline-axis\">&#xe63f;</i>\n" +
            "            <div class=\"layui-timeline-content layui-text\">";
        var botton="</div>\n" +
            "        </li>\n" +
            "        <hr style='border: 1px dashed #4db0fd;height: 1px;margin: 0 15px 20px 10px'>";
        var content=" <h3 class=\"layui-timeline-title\"><span>"+vProcInfodata[0].askForDepartmentName+"</span>" +
            "<span style=\"margin-left: 10px\">"+vProcInfodata[0].askForTime+"</span>" +
            "<span style=\"margin-left: 10px\">"+vProcInfodata[0].askFullName+"("+vProcInfodata[0].askRoleName+")"+"</span></h3>\n" +
            "                <p>" +
            "由"+vProcInfodata[0].askForDepartmentName+"分配到"+vProcInfodata[0].procDepartmentName
            +"                </p>"
        $("#timeline").append(top+content+botton);
        setTimeLine(vProcInfodata)
    }

    function setTimeLineStartByOne(vCaseProcInfo){
        var top="<li class=\"layui-timeline-item\">\n" +
            "            <i class=\"layui-icon layui-bg-blue layui-timeline-axis\">&#xe63f;</i>\n" +
            "            <div class=\"layui-timeline-content layui-text\">";
        var botton="</div>\n" +
            "        </li>\n" +
            "        <hr style='border: 1px dashed #4db0fd;height: 1px;margin: 0 15px 20px 10px'>";
        var content=" <h3 class=\"layui-timeline-title\"><span>"+vCaseProcInfo[0].askForDepartmentName+"</span>" +
            "<span style=\"margin-left: 10px\">"+vCaseProcInfo[0].askForTime+"</span>" +
            "<span style=\"margin-left: 10px\">"+vCaseProcInfo[0].fullName+"("+vCaseProcInfo[0].roleName+")"+"</span></h3>\n" +
            "                <p>" +
            "由"+vCaseProcInfo[0].askForDepartmentName+"分配到"+vCaseProcInfo[0].procDepartmentName
            +"                </p>"
        $("#timeline").append(top+content+botton);
    }

    function getParentData(parentData) {
        getProcessDataByCount(parentData.processId)
    }

    function returnData(inputData){
        var data={
            "height":$("#timeline").height()+150
        }
        $(window.parent.processReturnData(data));
    }

    layui.use(['layedit', 'upload', 'form'], function () {
        var layedit = layui.layedit;
        var upload = layui.upload;
        var form = layui.form;

        $("*[name=showContent]").on("click", function () {
            $(window.parent.showProcessContent($(this).attr("clickId")));
        })
    });

    function showFile(clickId){
            $(window.parent.showProcessContent(clickId));
    }


</script>

</html>